<template>
  <div class="container">
    <el-row v-show="this.$store.state.ZT">
      <el-col style="width: 40vw">
        <el-card shadow="hover">
          <el-form v-model="user" style="text-align: center" label-width="80px">

            <el-form-item label="姓名:">
              <el-input v-model="user.name"></el-input>
            </el-form-item>

            <el-form-item label="年龄:">
              <el-input v-model="user.age"></el-input>
            </el-form-item>

            <el-form-item label="性别:">
              <el-select v-model="user.sex" placeholder="请选择性别">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="出生日期:">
              <el-date-picker
                  v-model="user.birthday"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择日期">
              </el-date-picker>
            </el-form-item>

            <el-form-item label="地址:">
              <el-input v-model="user.address"></el-input>
            </el-form-item>

            <el-button type="danger" @click="yinchang">取消</el-button>
            <el-button type="danger" @click="submit">提交</el-button>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "MainForm",
  data() {
    return {
      user: {},
      options: [{
        value: '男',
        label: '男'
      }, {
        value: '女',
        label: '女'
      }]
    }
  },

  methods: {
    //隐藏弹窗
    yinchang() {
      this.$store.state.ZT = !this.$store.state.ZT;
      if (this.$store.state.GongNeng === 'Add') {
        this.$message('已取消添加!');
      } else {
        this.$message('已取消修改!');
      }
    },

    //提交
    submit() {

      //判断如果是'Add'进行添加功能
      if (this.$store.state.GongNeng === 'Add') {
        this.$bus.$emit('Adduser', this.user)

      } else {
        this.$bus.$emit('Updataed', this.user)
        this.$store.state.ZT = !this.$store.state.ZT;
        this.$message({
          type: 'success',
          message: '已修改成功！'
        })
      }
    }
  },

  mounted() {
    //获取需要的user数据
    this.$bus.$on('getuser', (User) => {
      this.user = User
    })
  }
}
</script>

<style scoped>
.container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>